import React from 'react'
// import {inject, observer} from 'mobx-react'

import {connect} from 'react-redux'
// import {useSelector, useDispatch} from 'react-redux'

import { handleMsg } from '@/store2/actions'

//redux高阶函数实现状态管理
const mapState = store => ({msg: store.test.msg})
const mapDispatch = dispatch => ({changeMsg: payload => dispatch(handleMsg(payload))})
export default connect(mapState,mapDispatch)(props => {
  console.log(props);
  const {msg, changeMsg} = props
    return (
      <div>
        <h5>{msg}</h5>
        <button onClick={() => changeMsg('redux 使用成功')}>点击</button>
      </div>
    )
})

//redux Hooks写法，实现状态管理
// export default props => {
//   const msg = useSelector(store => store.test.msg)
//   const d = useDispatch()

//   console.log(props);
//     return (
//       <div>
//         <h5>{msg}</h5>
//         <button onClick={() => d(handleMsg('redux使用Hooks更新状态成功'))}>点击</button>
//       </div>
//     )
// }

//mobx实现状态管理
// export default inject('home')(observer(props => {
//   console.log(props);
//   const {home} = props
//     return (
//       <div>
//         <h5>{home.msg}</h5>
//         <h6>{home.len}</h6>
//         <button onClick={() => home.msgFn('修改成功')}>点击</button>
//       </div>
//     )
// }))